<template>
    <view class="container">
        <view class="search-bar">
            <input placeholder="搜索门店名称/地址" />
        </view>
        <view class="store-list">
            <block v-for="(item, index) in stores" :key="index">
                <view class="store-item">
                    <view class="floatRightLabel">离你最近</view>
                    <view class="store-info">
                        <view class="store-name">{{ item.shopName }}</view>
                        <view class="store-price">{{ item.price }}</view>
                        <view class="address_box">
                            <image class="postions_icon" src="/static/images/postions_icon.png" mode="" />
                            <view class="store-address">{{ item.shopAddress }}</view>
                        </view>
                        <view class="store-availability-box">
                            <!-- <view class="availability-box-item">空闲6台</view> -->
                            <view class="availability-box-item">可预定</view>
                            <view class="availability-box-item">免押金</view>
                        </view>
                    </view>
                    <view class="store-action" @tap="goDetail(item)" >
                        <view class="store-button">去开台</view>
                        <view class="store-distance">{{ item.distance }}米</view>
                        <view class="distGo">
                            <image class="right_icon" src="/static/images/right_icon3.png" mode="" />
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted  } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { getShopList } from '@/api/store/index'
// 响应式状态
const stores = ref([
    {
        id: 1,
        name: '南京义乌商品城店',
        address: '南京市江宁区天元东路388号',
        distance: '距您50m',
        price: '￥25起/小时',
        availability: '空闲6台，可预订（免押金）'
    },
    {
        id: 2,
        name: '南京义乌商品城店',
        address: '南京市江宁区天元东路388号',
        distance: '距您50m',
        price: '￥25起/小时',
        availability: '空闲6台，可预订（免押金）'
    }
])

const selected = ref(0)

// 页面跳转方法
const goDetail = (e) => {
    uni.navigateTo({
        url: '/pages/storeDetail/index?shopId=' + e.shopId
    })
}

// 获取门店列表数据
const getDataList = async () => {
    let params = {
        longitude: '',
        latitude: ''
    }
    const res = await getShopList(params)
    stores.value = res.result
    console.log('门店列表',stores.value)
}

//获取定位
const getLocation = () => {
    console.log('获取定位')
    uni.getLocation({
        type: 'gcj02', //返回可以用于uni.openLocation的经纬度
        success: function (res) {
            console.log('当前位置的经度：' + res.longitude);
            console.log('当前位置的纬度：' + res.latitude);
        },
        fail: function () {
            uni.showModal({ content: '获取位置失败' });
        }
    });
}


// 生命周期钩子
onShow(() => {
    
})

onLoad(() => {
    // getLocation()
    getDataList()
})
</script>

<style>
/* 整体容器 */
.container {
    padding: 32rpx;
    width: calc(100vw - 64rpx);
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 搜索栏 */
.search-bar input {  
    /* width: calc(100vw - 64rpx - 24rpx); */
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    color: #666;
    border: 1px solid #eee;
}

/* 门店列表 */
.store-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-top: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* 左侧文本样式 */
.store-info {
    flex: 1;
}

.store-name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
    margin-top: 10rpx;
}

.floatRightLabel {
    position: absolute;
    right: 0;
    top: 0;
    border-top-right-radius: 16rpx;
    border-bottom-left-radius: 16rpx;
    font-size: 22rpx;
    background: #10cfc9;
    color: #ffffff;
    padding: 6rpx 18rpx;
}

.store-meta {
    margin: 8px 0;
    display: flex;
    align-items: center;
}

.store-price {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #000000;
    margin-top: 10rpx;
}

.store-divider {
    color: #ddd;
    margin: 0 6px;
}

.store-distance {
    font-size: 14px;
    color: #999999;
    text-align: center;
}

.address_box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10rpx;
}

.postions_icon {
    width: 38rpx;
    height: 40rpx;
}

.store-address {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    padding-left: 10rpx;
}

.store-availability-box {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10rpx;
}

.availability-box-item {
    padding: 4rpx 10rpx;
    border-radius: 22rpx;
    font-size: 22rpx;
}

.availability-box-item:nth-child(1) {
    border: 1rpx solid #00cfca;
    color: #00cfca;
}

.availability-box-item:nth-child(2) {
    border: 1rpx solid #e46e51;
    color: #e46e51;
    margin-left: 10rpx;
}

.availability-box-item:nth-child(3) {
    border: 1rpx solid #999999;
    color: #999999;
    margin-left: 10rpx;
}

/* 右侧按钮 */
.store-button {
    padding: 12rpx 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
}

.store-button::after {
    border: none;
}

.distGo {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #001c71;
    border-radius: 50%;
    margin: 10rpx auto 0;
}

.right_icon {
    width: 100%;
    height: 100%;
}
</style>
